<template>
  <el-dialog
    title="预览文章"
    :visible="showPreviewDialog"
    @close="closePreDialog"
  >
    <div class="title">
      <h2>{{ previewItem.title }}</h2>
      <div>
        <span>{{ previewItem.createTime | formatTime }}</span>
        <span>{{ previewItem.username }}</span>
        <span class="el-icon-view"></span>
        <span>{{ previewItem.visits }}</span>
      </div>
    </div>
    <div id="content" v-html="previewItem.articleBody"></div>
  </el-dialog>
</template>

<script>
import moment from 'moment'
export default {
  name: 'previewArticles',
  props: {
    showPreviewDialog: {
      type: Boolean,
      default: false
    },
    previewItem: {
      type: Object,
      required: true
    }
  },
  filters: {
    // 格式化时间
    formatTime (val) {
      return moment(val).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  methods: {
    closePreDialog () {
      this.$emit('closePreDialog')
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep {
  .el-dialog {
      .el-dialog__body {
        padding: 20px 20px;
        span {
          padding: 5px;
        }
      }
  }

}
#content {
  background-color: #f5f5f5;
  padding: 10px;
  margin: 0, 10px, 10px;
  border-top: 1px dashed #ccc;
  ::v-deep {
    img {
      width: 100%;
    }
  }
}
</style>
